<template>
    <div class="page-index">
        <div id="map"></div>

        <!--<div class="total-count">
            <div class="item">
                <img src="../assets/ren.png" alt="">
                <div class="name_a">在园人数</div>
                <div class="num">3200<span>人</span></div>
            </div>
            <div class="item">
                <img src="../assets/ren.png" alt="">
                <div class="name_a">今日访客</div>
                <div class="num">300<span>人</span></div>
            </div>
            <div class="item">
                <img src="../assets/che.png" alt="">
                <div class="name_a">今日车流</div>
                <div class="num">3200<span>辆</span></div>
            </div>
        </div>-->
        <!--<div class="total-count">
            <div class="item">
                <img src="../assets/ren.png" alt="">
                <div class="name_a">在园人数</div>
                <div class="num">{{lNumber}}<span>人</span></div>
            </div>
            <div class="item">
                <img src="../assets/ren.png" alt="">
                <div class="name_a">今日访客</div>
                <div class="num">{{inNumber}}<span>人</span></div>
            </div>
            <div class="item">
                <img src="../assets/che.png" alt="">
                <div class="name_a">今日车流</div>
                <div class="num">{{carInNumber}}<span>辆</span></div>
            </div>
        </div>-->

        <!--<div class="events">
            <a-badge count="5">
                <a-button type="primary" shape="round" @click="visible=true">
                    全部事件
                </a-button>
            </a-badge>

            <a-badge count="5">
                <a-button shape="round">
                    人流超限
                </a-button>
            </a-badge>

            <a-badge count="5">
                <a-button shape="round">
                    SOS警报
                </a-button>
            </a-badge>

            <a-badge count="5">
                <a-button shape="round">
                    火警
                </a-button>
            </a-badge>
        </div>-->

        <!--<div class="left-chart">
            <div class="chart-box-wrap">
                <chart-box>
                    <template #name>智能设备统计</template>
                    <template #chart>
                        <Table />
                    </template>
                </chart-box>
            </div>
            <div class="chart-box-wrap">
                <chart-box>
                    <template #name>当日人员进出趋势</template>
                    <template #chart>
                        <people-chart />
                    </template>
                </chart-box>
            </div>
            <div class="chart-box-wrap">
                <chart-box>
                    <template #name>当日车辆进出趋势</template>
                    <template #chart>
                        <car-chart />
                    </template>
                </chart-box>
            </div>
        </div>-->
        <!--<div class="right-chart">
            <div class="chart-box-wrap">
                <chart-box>
                    <template #name>能源监测</template>
                    <template #chart>
                        <energy-chart />
                    </template>
                </chart-box>
            </div>
            <div class="chart-box-wrap" style="height:30%">
                <chart-box>
                    <template #name>事件报警</template>
                    <template #chart>
                        <warning-chart />
                    </template>
                </chart-box>
            </div>
            <div class="chart-box-wrap" style="height:36.66%">
                <chart-box>
                    <template #name>视频监控系统</template>
                    <template #ctrl>
                        <CaretLeftOutlined :style="{color:currentPage===1?'grey':'#fff',cursor:currentPage===1?'not-allowed':'pointer'}" @click="prevPage" />
                        <CaretRightOutlined :style="{color:currentPage===totalPage?'grey':'#fff',cursor:currentPage===totalPage?'not-allowed':'pointer'}" @click="nextPage"/>
                        {{currentPage}}/{{ totalPage }}
                    </template>
                    <template #chart>
                        <videos />
                    </template>
                </chart-box>
            </div>
        </div>-->

        <!--<a-modal v-model:open="visible" :footer="null" :centered="true">
            <template #title>
                <EnvironmentOutlined />长宁区安华北路11号楼
            </template>
            <div style="padding-top:20px;">
                <a-button type="primary" style="float:right;margin-top:10px;">处置</a-button>
                <h2>火警</h2>
                <p>编号：a123456</p>
                <p>报警时间：2024-05-21 14:20:32</p>

                <p>处置进度：待处置</p>
                <p>设备名称：AS25-A</p>
            </div>
        </a-modal>

        <a-modal v-model:open="pointInfoShow" :footer="null" :centered="true">
            <template #title>
                <EnvironmentOutlined />{{pointInfo.name}}
            </template>
            <div style="padding-top:20px;">
                <h2>火警</h2>
                <p>创：a123456</p>
                <p>报警时间：2024-05-21 14:20:32</p>
                <p>处置进度：待处置</p>
                <p>设备名称：AS25-A</p>
            </div>
        </a-modal>-->
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import {CaretLeftOutlined,CaretRightOutlined,EnvironmentOutlined} from '@ant-design/icons-vue';
import ChartBox from '../components/ChartBox.vue'
import Table from '../components/index/Table.vue'
import PeopleChart from '../components/index/PeopleChart.vue'
import CarChart from '../components/index/CarChart.vue';
import EnergyChart from '../components/index/EnergyChart.vue';
import WarningChart from '../components/index/WarningChart.vue';
import Videos from '../components/index/Videos.vue';
import img1 from '../assets/icon1.png';
import img2 from '../assets/icon2.png';
import img3 from '../assets/icon3.png';
import Http from '../util/http';
export default defineComponent({
    components:{ChartBox,Table,PeopleChart, CarChart, EnergyChart,WarningChart, Videos,CaretLeftOutlined,CaretRightOutlined,EnvironmentOutlined},
    setup() {
        const map = ref(null);
        const state = reactive({
            currentPage:1,
            totalPage:20,
            visible:false,
            pointInfoShow:false,
            pointInfo:{}
        })
        const inNumber= ref(0)
        const outNumber= ref(0)
        const lNumber= ref(0)
        const carInNumber = ref(0)
        onMounted(() => {
            /*getNumber();*/
            initMap();




        });

        const initMap = ()=>{
            AMapLoader.load({
                key: 'c8a4b872d8310a43329344227b0db9bb', // 高德地图API Key
                version: '2.0', // 指定API版本
                plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'], // 需要使用的插件
            }).then((AMap) => {
                map.value = new AMap.Map('map', {
                    zoom: 16.5,
                    pitch: 65,
                    center: [118.773, 24.858],
                    // mapStyle: 'amap://styles/blue',
                    showBuildingBlock: true,
                    showLabel: true,
                });


                // 底图楼块扣除
                

                initMapData()
                setInterval(() => {
                    setTimeout(() => {
                        initMapData()
                    }, 0)
                }, 3000)


            }).catch((e) => {
                console.error(e);
            });
        }

        const initMapData = ()=>{
            var style = [{
                url: img1,
                anchor: new AMap.Pixel(6, 6),
                size: new AMap.Size(30, 30),
                zIndex: 3,
            }
            ];
            Http.getDwCardInfos().then(res=>{
                let arr1 = res.data.dcLocationCardInfos.dcLocationCardInfos.map(item=>{
                    return {
                        lnglat:[item.currentLat,item.currentLon],
                        name:item.cardNo,
                        style:1,
                        id:item.id,
                        createTime:item.createTime,
                        updateTime:item.updateTime,
                        createBy:item.createBy,
                        updateBy:item.updateBy,
                    }
                });
                let points = [...arr1].map(function(item) {
                    return {
                        ...item,
                    }
                })
                map.value.clearMap();
                let mass = new AMap.MassMarks(points, {
                    opacity: 0.8,
                    zIndex: 111,
                    cursor: 'pointer',
                    style: style
                });

                mass.on('click',function(e) {
                    Object.assign(state,{
                        pointInfoShow:true,
                        pointInfo:e
                    })
                })
                mass.setMap(map.value);

                [...arr1].forEach(item=>{
                    console.log(item.lnglat)
                    var text = new AMap.Text({
                        text:item.name,
                        anchor:'center', // 设置文本标记锚点
                        style:{
                            'padding': '5px 10px',
                            'margin-bottom': '40px',
                            'border-radius': '5px',
                            'background-color': 'white',
                            'width': 'auto',
                            'border-width': 0,
                            'text-align': 'center',
                            'font-size': '14px',
                            'color': '#000000'
                        },
                        position:item.lnglat,
                    });
                    text.setMap(map.value);
                });
            })
        }

        const getNumber = ()=>{
            Http.getNumber().then(res => {
                if (res.data) {
                    inNumber.value = res.data.inNumber;
                    outNumber.value = res.data.outNumber;
                    lNumber.value = res.data.lNumber;
                }
            });
        }

        const prevPage = ()=>{
            if(state.currentPage===1) {
                return false;
            }
            Object.assign(state,{
                currentPage:state.currentPage-1
            })
        }

        const nextPage = ()=>{
            if(state.currentPage===state.totalPage) {
                return false;
            }
            Object.assign(state,{
                currentPage:state.currentPage+1
            })
        }

        return {
            map,
            ...toRefs(state),
            prevPage,
            nextPage,
            inNumber,
            outNumber,
            lNumber,
            carInNumber
        }
    }
})
</script>

<style lang="scss">
.page-index {
    width:100%;
    height:100%;
    background:#add;
    #map {
        height:100%;
        width:100%;
    }
    

    .total-count {
        position: absolute;
        height:80px;
        text-align:center;
        top:120px;
        left:50%;
        z-index: 999;
        transform: translate(-50%,0);
        .item {
            display: inline-block;
            width:200px;
            text-align: left;
            font-size:12px;
            img {
                float:left;
                width:60px;
                margin-right:20px;
            }
            .name_a {
                padding-top:5px;
                color:#ddd;
            }
            .num {
                font-size:24px;
                span {
                    font-size:12px;
                }
            }
        }
    }
    .events {
        position: absolute;
        height:80px;
        text-align:center;
        bottom:0;
        left:50%;
        z-index: 999;
        transform: translate(-50%,0);
        .ant-badge {
            margin:0 20px;
        }
    }
    .left-chart {
        width:500px;
        height:100%;
        position: absolute;
        top:0;
        left:20px;
        padding-top:90px;
        padding-bottom: 10px;
        .chart-box-wrap {
            height:33.33%;
            padding:10px 0;
        }
    }
    .right-chart {
        width:500px;
        height:100%;
        position: absolute;
        top:0;
        right:20px;
        padding-top:90px;
        padding-bottom: 10px;
        .chart-box-wrap {
            height:33.33%;
            padding:10px 0;
        }
    }
}
</style>